<template>
  <div>
    <el-card shadow="never">
      <template slot="header">
        <span>客户列表</span>
      </template>
      <Search :search-options="searchOptions" @search="handleSearch">
        <template #customSelectSlot="{ form }">
          <el-select v-model="customerStatus" @change="customerStatusChange" placeholder="请选择" style="width: 180px">
            <el-option v-for="item in type_options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </template>

      </Search>
      <el-table v-loading="listLoading" element-loading-text="数据正在加载中" :data="data" border fit highlight-current-row
        style="width: 100%">
        <el-table-column v-for="item in columns" :key="item.prop" :label="item.label" :prop="item.prop"
          :align="item.align" :width="item.width">
          <template slot-scope="{ row, $index }">
            <div v-if="item.slot === 'index'">{{ $index + 1 }}</div>
            <div v-else-if="item.prop === 'customerStatus'">
              {{ customerStatusMap[row.customerStatus] || '--' }}
            </div>
            <div v-else-if="item.prop === 'customerType'">
              {{ customerType[row.customerType] || '--' }}
            </div>
            <div v-else-if="item.prop === 'riskGrade'">
              {{ row.riskGrade || '--' }}
            </div>
            <div v-else-if="item.prop === 'allowTrade'">
                <el-tag :type="row.allowTrade === 'YES' ? 'success' : 'danger'" size="small">
                {{ row.allowTrade === 'YES' ? '是' : '否' }}
              </el-tag>
            </div>
            <div v-else-if="item.prop === 'isAgent'">
              <el-tag :type="row.isAgent === 'YES' ? 'success' : 'danger'" size="small">
                {{ row.isAgent === 'YES' ? '是' : '否' }}
              </el-tag>
            </div>
            <div v-else>{{ row[item.prop] }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="240" fixed="right">
          <template slot-scope="{ row }">
            <el-tooltip class="item" effect="dark" content="查看详情" placement="top" v-auth="'view'">
              <el-button type="primary" size="mini" icon="el-icon-view" circle @click="viewDetail(row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <Pagination :page="current" :page_size="size" :total="total" @sizeChange="sizeChange"
        @currentChange="pageChange" />
    </el-card>

  </div>
</template>

<script>
import Search from '@/components/Search.vue';
import Pagination from '@/components/Pagination.vue';
import { SEARCH_OPTIONS, columns } from './options';
import { getCustomerList, changeCustomerItemSate } from '../api/customer';
import AddOrEdit from './AddOrEdit.vue';
import EditDialog from './EditDialog.vue';
import AuditDialog from './AuditDialog.vue';
import { IMG_URL } from '@/utils/utils';
export default {
  name: 'CustomerList',
  data() {
    return {
      IMG_URL,
      listLoading: false,
      searchOptions: SEARCH_OPTIONS,
      current: 1,
      size: 20,
      loading: false,
      data: [],
      total: 0,
      searchParams: {},
      columns: Object.freeze(columns),
      customerStatusMap: {
        'AUDITING': '审核中',
        'AUTHED': '已实名',
        'ENT_AUTHED': '已企业认证',
      },
      customerType: {
        'PERSONAL': '个人',
        'ENTERPRISE': '企业',
      },
      type_options: [
        {
          value: 'AUDITING',
          label: '审核中'
        },
        {
          value: 'AUTHED',
          label: '已实名'
        },
        {
          value: 'ENT_AUTHED',
          label: '已企业认证'
        }
      ],
      customerStatus: '',
      statusDialogVisible: false,
      selectedNewStatus: '',
      currentCustomer: null,
      statusLoading: false,
    }
  },
  components: { Search, Pagination, AddOrEdit, EditDialog, AuditDialog },
  computed: {
    currentCustomerStatusText() {
      if (!this.currentCustomer) return '--';
      return this.customerStatusMap[this.currentCustomer.customerStatus] || '--';
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      const { current, size, searchParams } = this;
      const p = { current, size, ...searchParams }
      this.listLoading = true;
      getCustomerList(p).then(res => {

        this.listLoading = false;
        this.total = res.total;
        this.data = res.records;

      }).catch(() => {
        this.listLoading = false;
      })
    },
    customerStatusChange(id) {
      this.pageChange(1);
    },
    handleSearch(params) {
      this.searchParams = params;
      // 执行搜索操作
      this.current = 1;
      this.init();
    },

    pageChange(page) {
      this.current = page;
      this.init();
    },
    sizeChange(size) {
      this.size = size;
      this.current = 1;
      this.init();
    },
    viewDetail(row) {
      this.$router.push({
        path: '/customer/detail',
        query: {
          id: row.id
        }
      });
    },
  }
}
</script>

<style scoped>
.cursor-pointer {
  cursor: pointer;
}

.cursor-pointer:hover {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

/* 图片预览样式优化 */
:deep(.el-image-viewer__wrapper) {
  z-index: 2100;
}

:deep(.el-image-viewer__img) {
  max-width: 100%;
  max-height: 100%;
}
</style>